<template>
  <div class="publish-container">
    <Tabs
      id="publish-tab"
      :value="activeTab"
      @on-click="handleTabClick"
      v-if="this.$route.query.roll=='seller'"
    >
      <TabPane label="普通订单" name="goods">
        <goods-order-item :orders="goodsOrderList"></goods-order-item>
      </TabPane>
      <TabPane label="拍卖订单" name="bid">
        <bid-order-item :orders="bidOrderList"></bid-order-item>
      </TabPane>
    </Tabs>

    <Tabs id="publish-tab" :value="activeTab" @on-click="handleTabClick" v-else>
      <TabPane label="普通订单" name="goods">
        <goods-order-item :orders="goodsOrderList"></goods-order-item>
      </TabPane>
      <TabPane label="拍卖订单" name="bid">
        <bid-order-item :orders="bidOrderList"></bid-order-item>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import { getBasicInfo } from "../../utils/mixin";
import GoodsOrderItem from "@/components/Goods_Order_Item";
import BidOrderItem from "@/components/Bid_Order_Item";

export default {
  name: "order-management",
  mixins: [getBasicInfo],
  components: {
    GoodsOrderItem,
    BidOrderItem
  },
  data() {
    return {
      goodsOrderList: {},
      bidOrderList: {}
    };
  },
  computed: {
    activeTab() {
      return "goods";
    }
  },
  watch: {
    $route() {
      if (this.$route.query.roll == "buyer") {
        this.fetchOrder("buyer");
      } else {
        this.fetchOrder("seller");
      }
    }
  },
  mounted() {
    if (this.$route.query.roll == "buyer") {
      this.fetchOrder("buyer");
    } else {
      this.fetchOrder("seller");
    }
  },
  methods: {
    fetchOrder(type) {
      if (type == "buyer") {
        this.axios
          .all([
            this.axios.get(`/api/order?uid=${this.getUid}&type=goods`),
            this.axios.get(`/api/order?uid=${this.getUid}&type=bid`)
          ])
          .then(
            this.axios.spread((goodsRes, bidRes) => {
              this.goodsOrderList = goodsRes.data;
              this.bidOrderList = bidRes.data;
            })
          ).catch(err => console.log('err :>> ', err));
      } else {
        this.axios
          .all([
            this.axios.get(`/api/order?cid=${this.getCid}&type=goods`),
            this.axios.get(`/api/order?cid=${this.getCid}&type=bid`)
          ])
          .then(
            this.axios.spread((goodsRes, bidRes) => {
              this.goodsOrderList = goodsRes.data;
              this.bidOrderList = bidRes.data;
            })
          ).catch(err => console.log('err :>> ', err));
      }
    },
    handleTabClick(name) {
      //   this.$router.push({ path: "order_management", query: { type: name } });
    }
  }
};
</script>

<style lang="scss" scoped>
.publish-container {
  width: 80%;
  padding: 20px;
}
</style>